<template>
  <div class="header">
    <div class="logo">
      <img src="../../assets/images/logo.png" alt />
    </div>
    <div class="header-weather">
      <!-- <img class="tianqi" src="../../assets/images/tianqi.png" alt /> -->
      <div class="weather-information">
        <div class="headtext">
          欢迎您
          <span>{{username}}</span>
          <!-- <img src="../../assets/images/out.png" alt /> -->
        </div>
        <p>
          {{gettime}}
          <span>{{getDateMark}}</span>
        </p>
        <!-- <span>北京顺义</span> -->
        <!-- <span>{{weather.today.cond_txt_d}}</span>
        <span>{{weather.today.tmp_min}}℃-{{weather.today.tmp_max}}℃</span>-->
      </div>
      <!-- <div class="headtext">
        欢迎您
        <span>张文学</span>
        <img src="../../assets/images/out.png" alt />
      </div>-->
      <span class="userout" @click="userout">
        <img src="../../assets/images/out.png" alt />
      </span>
    </div>
    <!-- 退出登录 -->
    <div class="outbox" v-show="out">
      <div class="mdel">
        <div class="bq-all">
          <span class="xian"></span>
          退出登录
          <div class="cha" @click="outCancel"></div>
        </div>
        <div class="mdel-body">你确定要退出登录吗?</div>
        <div class="mdel-button">
          <button class="bc" @click="outsure">确定</button>
          <button class="tj" @click="outCancel">取消</button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
// import { getWeatherByCity } from "../../service/weatherHydrological/index";
export default {
  data() {
    return {
      gettime: "",
      getDateMark: "",
      // weather: {
      //   today: {
      //     cond_txt_d: "",
      //     tmp_min: "",
      //     tmp_max: ""
      //   }
      // } //存储天气信息
      username: window.sessionStorage.getItem("name"),
      out: false //退出登录
    };
  },
  created: function() {
    var myDate = new Date();
    var days = myDate.getDay();
    switch (days) {
      case 1:
        this.getDateMark = "星期一";
        break;
      case 2:
        this.getDateMark = "星期二";
        break;
      case 3:
        this.getDateMark = "星期三";
        break;
      case 4:
        this.getDateMark = "星期四";
        break;
      case 5:
        this.getDateMark = "星期五";
        break;
      case 6:
        this.getDateMark = "星期六";
        break;
      case 0:
        this.getDateMark = "星期日";
        break;
    }

    this.timer = setInterval(() => {
      // var aData = new Date();
      const yy = new Date().getFullYear();
      const mm = new Date().getMonth() + 1;
      const dd = new Date().getDate();
      const hh = new Date().getHours();
      const mf =
        new Date().getMinutes() < 10
          ? "0" + new Date().getMinutes()
          : new Date().getMinutes();
      const ss =
        new Date().getSeconds() < 10
          ? "0" + new Date().getSeconds()
          : new Date().getSeconds();
      this.gettime = yy + "-" + mm + "-" + dd + "  " + hh + ":" + mf + ":" + ss;
    }, 1000);

    //页面加载完成,获取顺义天气信息
    // getWeatherByCity("顺义").then(res => {
    //   this.weather = res.data.obj;
    // });
  },
  methods: {
    //取消按钮
    userout() {
      this.out = true;
    },
    //退出取消
    outCancel() {
      this.out = false;
      this.$message({
        type: "info",
        message: "已取消"
      });
    },
    //确认退出
    outsure() {
      window.sessionStorage.removeItem("id");
      window.sessionStorage.removeItem("token");
      window.sessionStorage.removeItem("name");
      this.out = false;
      this.$router.push("/login");
      this.$message({
        type: "success",
        message: "退出登录!"
      });
    }
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer); // 在Vue实例销毁前，清除我们的定时器
    }
  }
};
</script>
<style lang="scss" scoped>
@import "@/style/left/top.scss";
</style>